<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>维修单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="维修单号">{{ repairInfo.repairCode }}</el-descriptions-item>
        <el-descriptions-item label="维修状态">
          <el-tag :type="repairInfo.status === 'pending' ? 'warning' : repairInfo.status === 'processing' ? 'primary' : repairInfo.status === 'completed' ? 'success' : 'info'">
            {{ statusFormat(repairInfo.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ repairInfo.equipmentName }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ repairInfo.equipmentCode }}</el-descriptions-item>
        <el-descriptions-item label="故障描述">{{ repairInfo.faultDescription }}</el-descriptions-item>
        <el-descriptions-item label="故障类型">{{ repairInfo.faultType }}</el-descriptions-item>
        <el-descriptions-item label="优先级">{{ priorityFormat(repairInfo.priority) }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ repairInfo.reportPerson }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ repairInfo.reportPhone }}</el-descriptions-item>
        <el-descriptions-item label="报修时间">{{ parseTime(repairInfo.reportTime) }}</el-descriptions-item>
        <el-descriptions-item label="处理人">{{ repairInfo.handlePerson }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{ parseTime(repairInfo.handleTime) }}</el-descriptions-item>
        <el-descriptions-item label="维修结果" :span="2">{{ repairInfo.handleResult || '暂无维修结果' }}</el-descriptions-item>
        <el-descriptions-item label="维修费用" v-if="repairInfo.cost">{{ repairInfo.cost }} 元</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ repairInfo.remark }}</el-descriptions-item>
      </el-descriptions>

      <div v-if="repairInfo.faultImages && repairInfo.faultImages.length > 0" style="margin-top: 20px;">
        <h4>故障照片</h4>
        <el-image 
          v-for="(url, index) in repairInfo.faultImages" 
          :key="index" 
          :src="url" 
          style="width: 150px; height: 150px; margin-right: 10px;"
          :preview-src-list="repairInfo.faultImages">
        </el-image>
      </div>

      <div v-if="repairInfo.status === 'pending'" style="margin-top: 20px; text-align: center;">
        <el-button type="primary" @click="handleProcess">处理报修</el-button>
        <el-button type="danger" @click="handleCancel">取消报修</el-button>
      </div>

      <div v-if="repairInfo.status === 'processing' || repairInfo.status === 'repairing'" style="margin-top: 20px; text-align: center;">
        <el-button type="success" @click="handleComplete">完成维修</el-button>
        <el-button type="danger" @click="handleCancel">取消维修</el-button>
      </div>

      <!-- 处理报修的对话框 -->
      <el-dialog title="处理报修" :visible.sync="processDialogVisible" width="500px" append-to-body>
        <el-form ref="processForm" :model="processForm" :rules="processRules" label-width="100px">
          <el-form-item label="处理结果" prop="handleResult">
            <el-input v-model="processForm.handleResult" type="textarea" placeholder="请输入处理结果" :rows="3" />
          </el-form-item>
          <el-form-item label="处理人" prop="handlePerson">
            <el-input v-model="processForm.handlePerson" placeholder="请输入处理人" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitProcess">确 定</el-button>
          <el-button @click="processDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getRepairOrder, processRepair, completeRepair, cancelRepair } from '@/api/sb/repairOrder'

export default {
  name: 'RepairOrderDetail',
  data() {
    return {
      // 报修单信息
      repairInfo: {},
      // 维修状态选项
      statusOptions: [
        { dictLabel: '待处理', dictValue: 'pending' },
        { dictLabel: '处理中', dictValue: 'processing' },
        { dictLabel: '维修中', dictValue: 'repairing' },
        { dictLabel: '已完成', dictValue: 'completed' },
        { dictLabel: '已取消', dictValue: 'canceled' }
      ],
      // 优先级选项
      priorityOptions: [
        { label: '普通', value: 'normal' },
        { label: '紧急', value: 'urgent' },
        { label: '非常紧急', value: 'high' }
      ],
      // 处理对话框显示状态
      processDialogVisible: false,
      // 处理表单
      processForm: {
        repairId: null,
        handleResult: '',
        handlePerson: '',
        status: 'processing' // 处理中
      },
      // 处理表单校验
      processRules: {
        handleResult: [
          { required: true, message: '处理结果不能为空', trigger: 'blur' }
        ],
        handlePerson: [
          { required: true, message: '处理人不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const id = this.$route.query.id
    this.getRepairOrderDetail(id)
  },
  methods: {
    /** 获取报修单详情 */
    getRepairOrderDetail(id) {
      getRepairOrder(id).then(response => {
        this.repairInfo = response.data
        this.processForm.repairId = this.repairInfo.repairId
      })
    },
    // 维修状态字典翻译
    statusFormat(status) {
      for (let i = 0; i < this.statusOptions.length; i++) {
        if (this.statusOptions[i].dictValue === status) {
          return this.statusOptions[i].dictLabel
        }
      }
      return ''
    },
    // 优先级字典翻译
    priorityFormat(priority) {
      for (let i = 0; i < this.priorityOptions.length; i++) {
        if (this.priorityOptions[i].value === priority) {
          return this.priorityOptions[i].label
        }
      }
      return priority
    },
    /** 处理报修按钮操作 */
    handleProcess() {
      this.processForm.handlePerson = this.$store.getters.name;
      this.processForm.status = 'repairing'; // 开始维修
      this.processDialogVisible = true;
    },
    
    /** 完成维修按钮操作 */
    handleComplete() {
      this.$modal.confirm('确认完成维修？').then(() => {
        const completeData = {
          repairId: this.repairInfo.repairId,
          status: 'completed',
          handleResult: '维修完成',
          handlePerson: this.$store.getters.name
        };
        console.log('完成维修数据:', completeData);
        completeRepair(completeData).then(response => {
          console.log('完成维修响应:', response);
          this.$modal.msgSuccess('维修完成');
          this.getRepairOrderDetail(this.repairInfo.repairId);
        }).catch(err => {
          console.error('完成维修错误:', err);
          this.$modal.msgError('操作失败: ' + err.message);
        });
      }).catch(() => {});
    },
    /** 取消报修按钮操作 */
    handleCancel() {
      this.$modal.prompt('请输入取消原因', '取消维修', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '取消原因不能为空'
      }).then(({ value }) => {
        cancelRepair(this.repairInfo.repairId, value).then(response => {
          this.$modal.msgSuccess('取消成功');
          this.getRepairOrderDetail(this.repairInfo.repairId);
        }).catch(err => {
          this.$modal.msgError('取消失败: ' + err.message);
        });
      }).catch(() => {});
    },
    /** 提交处理表单 */
    submitProcess() {
      this.$refs['processForm'].validate(valid => {
        if (valid) {
          processRepair(this.processForm).then(response => {
            this.$modal.msgSuccess('处理成功');
            this.processDialogVisible = false;
            this.getRepairOrderDetail(this.repairInfo.repairId);
          }).catch(err => {
            this.$modal.msgError('处理失败: ' + err.message);
          });
        }
      });
    },
    /** 返回按钮操作 */
    goBack() {
      this.$router.push({ path: '/sb/repair-order' });
    }
  }
}
</script> 